<template>
  <div class="header-R">
    <el-input
      ref="input"
      prefix-icon="el-icon-search"
      class="custom-input"
      style="width: 85%"
      v-model="keyword"
      placeholder="搜索"
      size="mini"
      :disabled="isDisabled"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
    >
      <span
        @click.prevent="clearSearch"
        v-if="showClearButton"
        slot="suffix"
        class="clear"
      >
        <i class="el-icon-close"></i>
      </span>
    </el-input>
    <el-dropdown
      placement="bottom-start"
      trigger="click"
      @command="handleCommand"
    >
      <el-button><span style="font-weight: bold" class="el-icon-setting"></span></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="addFriend" icon="el-icon-s-custom">添加好友</el-dropdown-item>
        <el-dropdown-item command="addGroup" icon="el-icon-s-tools">设置中心</el-dropdown-item>
        <el-dropdown-item command="buildGroupChat" icon="el-icon-s-promotion">发起群聊</el-dropdown-item>
        <el-dropdown-item command="tagFriends" icon="el-icon-refresh">
          <template v-if="showSwitching === '0'">
            <span @click.prevent="switchShow('1')">全部展示</span>
          </template>
          <template v-if="showSwitching === '1'">
            <span @click.prevent="switchShow('0')">分组展示</span>
          </template>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    showSwitching: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      keyword: '',
      showClearButton: false
    };
  },
  methods: {
    handleInput() {
      this.showClearButton = this.keyword.length > 0;
      this.$emit('search', this.keyword);
    },
    
    handleFocus() {
      this.showClearButton = true;
      this.$emit('focus');
    },
    
    handleBlur() {
      if (!this.keyword) {
        this.showClearButton = false;
      }
      this.$emit('blur', this.keyword);
    },
    
    // 修复clearSearch方法，添加安全检查
    clearSearch() {
      this.keyword = '';
      this.showClearButton = false;
      this.$emit('search', '');
      
      // 安全地访问$refs.input
      if (this.$refs && this.$refs.input) {
        this.$refs.input.blur();
      }
      
      this.$emit('clear');
    },
    
    handleCommand(command) {
      this.$emit('command', command);
    },
    
    switchShow(value) {
      this.$emit('switch-show', value);
    }
  },
  // 添加组件生命周期检查
  beforeDestroy() {
    // 清除可能的引用
    this.$refs.input = null;
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.header-R {
  line-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

::v-deep .header-R .el-button {
  margin-left: 10px;
  padding: 5px 5px;
  background-color: #f3f3f3;
}

::v-deep .header-R .el-input__inner {
  background-color: #f3f3f3;
}

::v-deep .header-R .el-input__inner:focus {
  border-color: #f3f3f3;
}

.clear {
  background-color: #d1d1d1;
  cursor: pointer;
  color: #999999;
  font-weight: bold;
  border-radius: 50%;
  padding: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.clear:hover {
  background-color: #b3b3b3;
}

.clear i {
  font-size: 12px;
  line-height: 1;
}

.clear :hover {
  color: #7e7e7e;
}
</style>
